<template>
    <div>
        <el-form>
            <el-upload :limit="limit" action="" accept="image/*" :http-request="uploadFile" list-type="picture-card"
                :file-list="fileList" :on-exceed="handleExceed" :before-remove="beforeRemove" ref="upload">
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form>
    </div>
</template>
<script>
import { del } from 'vue'
import { uploadFiles, delUpLoadFiles } from '../api/publicSeries'
export default {
    props: {
        limit: {
            type: Number,
            default: 6
        },
        fileList: {
            type: Array,
            default: () => []
        },
        saveFilePahtList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            imgUrl: ''
        }
    },
    methods: {
        uploadFile(e) {
            const file = e.file
            const size = file.size / 1024 / 1024 / 2
            if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                this.$notify.warning({
                    title: '警告',
                    message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
                })
            } else if (size > 2) {
                this.$notify.warning({
                    title: '警告',
                    message: '图片大小必须小于2M'
                })
            } else {
                const params = new FormData()
                params.append('dir', "goods")
                params.append('file', file) // 图片 dir
                uploadFiles(params).then(res => {
                    this.imgUrl = res.data
                    this.$emit('getUrl', this.imgUrl.rpath)
                    console.log("3333---"+ this.imgUrl.rpath);
                    let saveFilePath = {
                        uid: file.uid,
                        path: this.imgUrl.rpath
                    }
                    console.log("添加2222---"+ JSON.stringify(this.imgUrl));
                    this.saveFilePahtList.push(saveFilePath);
                })
            }
        },
        // 图片上传超过数量限制
        handleExceed(files, fileList) {
            this.$message.error('图片数量超出限制!')
            console.log(files, fileList)
        },
        // 删除图片
        beforeRemove(file, fileList) {
            console.log('uid', file.uid)
            for (var i = 0; i < this.saveFilePahtList.length; i++) {
                if (this.saveFilePahtList[i].uid == file.uid) {
                    console.log('删除图片123', this.saveFilePahtList[i].path)
                    let delUrl = this.saveFilePahtList[i].path;
                    let param = {
                        imgPath: delUrl
                    }
                    delUpLoadFiles(param).then(res => {
                        this.$message.success('删除成功!')
                        this.$emit('handleRemove', delUrl)
                    })
                }
            }
        }
    }
}
</script>

<style scoped>

</style>
